<template>
  <div class="table">
    <div class="container">
      <!--    面包屑导航-->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>歌手管理</el-breadcrumb-item>
        <el-breadcrumb-item>歌手列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 卡片视图 -->
    <el-card>
      <!--      添加歌手按钮-->
      <div class="handle-box">
        <el-button type="primary" size="mini" @click="dialogVisible = true">添加歌手</el-button>
      </div>

      <el-table :data="SingerList" border stripe width="100%" height="500px">
        <el-table-column label="#" type="index" align="center"></el-table-column>
        <el-table-column label="歌手头像" width="110px" align="center" prop="pic">
          <template slot-scope="scope">
            <div class="singer-img">
              <img :src="getUrl(scope.row.pic)" width="100%">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="歌手名称" prop="name" width="180px" align="center" ></el-table-column>
        <el-table-column label="歌手性别" prop="sex" width="110px" align="center" ></el-table-column>

        <el-table-column label="生日" prop="birth" width="180px" align="center" ></el-table-column>
        <el-table-column label="地区" prop="location" width="150px" align="center" ></el-table-column>
        <el-table-column label="简介" prop="introduction" width="931px" align="center" ></el-table-column>
      </el-table>

      <!--     添加歌手弹出框-->
      <el-dialog
        title="添加歌手"
        :visible.sync="dialogVisible"
        width="400px" center
      >
        <el-form :model="registerForm" status-icon :rules="registerFormRules" ref="registerFormRef" label-width="80px"
                 class="demo-ruleForm">
          <el-form-item label="歌手名" prop="name" size="mini">
            <el-input size="mini" v-model="registerForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" size="mini">
            <el-radio-group v-model="registerForm.sex">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
              <el-radio :label="2">组合</el-radio>
              <el-radio :label="3">不明</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="生日" prop="birth" size="mini">
            <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.birth"
                            style="width: 100%"></el-date-picker>
          </el-form-item>

          <el-form-item label="地区" prop="location" size="mini">
            <el-input size="mini" v-model="registerForm.location"></el-input>
          </el-form-item>

          <el-form-item label="简介" prop="introduction" size="mini">
            <el-input size="mini" v-model="registerForm.introduction" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
        <el-button type="warning" size="mini" @click="resetForm(registerForm)">取消</el-button>
      </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {setSinger, findAllSinger} from '../api/index'
import {mixin} from '../mixins'

export default {
  name: 'Singer.vue',
  mixins: [mixin],
  data () {
    return {
      dialogVisible: false,
      registerForm: {
        name: '',
        sex: '',
        location: '',
        birth: '',
        introduction: ''
      },
      registerFormRules: {
        /*     name: [{require: true, message: '请输入歌手名', trigger: 'blur'}],
             sex: [{require: true, message: '请选择性别', trigger: 'blur'}],
             birth: [{require: true, message: '请选择生日', trigger: 'blur'}],
             location: [{require: true, message: '请选择地区', trigger: 'blur'}] */

      },
      SingerList: []
    }
  },
  created () {
    this.getAllSinger()
  },
  methods: {
    // 找所有歌手
    getAllSinger () {
      this.SingerList = []
      findAllSinger().then(res => {
        this.SingerList = res
      }).catch(err => {
        this.notify('查找歌手失败', 'error')
        console.log(err)
      })
    },

    // 添加歌手
    submitForm () {
      // eslint-disable-next-line no-unused-vars
      let d = this.registerForm.birth
      // eslint-disable-next-line no-unused-vars
      let datetime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      let params = new URLSearchParams()
      params.append('name', this.registerForm.name)
      params.append('sex', this.registerForm.sex)
      params.append('pic', '/img/singerPic/hhh.jpg')
      params.append('location', this.registerForm.location)
      params.append('birth', datetime)
      params.append('introduction', this.registerForm.introduction)
      setSinger(params).then((res) => {
        if (res.code === 1) {
          this.notify('添加成功', 'success')
        } else {
          this.notify('添加失败', 'error')
        }
      }).catch(err => {
        console.log(err)
      })
      this.dialogVisible = false
      this.getAllSinger()
    },
    resetForm () {
    }
  }

}
</script>

<style scoped>
.handle-box {
  margin-bottom: 30px;
}
.singer-img{
  width: 100%;
  height: 80px;
  /*  四个角圆弧*/
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}

</style>
